<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音案例解决方案</title>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    li{
        list-style: none;
    }

    .box{
        margin: 100px auto;
        width: 1200px;
        height: 418px;
        border: 1px solid #ddd;
        border-radius: 10px;
    }

    .box ul{
        display: flex;
        /*弹性盒子换行*/
        flex-wrap: wrap;
        /* 调整主轴对齐方式 */
        justify-content: space-between;
        /* 调整行对齐方式 */
        align-content: space-between;
        
        padding: 90px 40px 90px;
        height: 418px;
    }

    .box ul li{
        display: flex;

        width: 500px;
        height: 88px;
        background-color: #fff;
    }

    .box svg{
        width: 60px;
        height: 60px;
    }

    .box .pic{
        margin: 15px;
    }

    .box .text h4{
        line-height: 40px;
        font-size: 20px;
        font-weight: 400;
        color: #333;
    }

    .box .text p{
        font-size: 14px;
        color: #666;
    }





</style>


</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><path fill="currentColor" d="M20.92 2.38A15.72 15.72 0 0 0 17.5 2a8.26 8.26 0 0 0-6 2.06Q9.89 5.67 8.31 7.27c-1.21-.13-4.08-.2-6 1.74a1 1 0 0 0 0 1.41l11.3 11.32a1 1 0 0 0 1.41 0c1.95-2 1.89-4.82 1.77-6l3.21-3.2c3.19-3.19 1.74-9.18 1.68-9.43a1 1 0 0 0-.76-.73zm-2.36 8.75L15 14.67a1 1 0 0 0-.27.9a6.81 6.81 0 0 1-.54 3.94L4.52 9.82a6.67 6.67 0 0 1 4-.5A1 1 0 0 0 9.39 9s1.4-1.45 3.51-3.56A6.61 6.61 0 0 1 17.5 4a14.51 14.51 0 0 1 2.33.2c.24 1.43.62 5.04-1.27 6.93z"/><circle cx="15.73" cy="8.3" r="2" fill="currentColor"/><path fill="currentColor" d="M5 16c-2 1-2 5-2 5a7.81 7.81 0 0 0 5-2z"/></svg>
                </div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布抖音视频、西瓜视频以及今日头条</p>
                </div>

            </li>
            <li>
                <div class="pic">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><path fill="currentColor" d="M20.92 2.38A15.72 15.72 0 0 0 17.5 2a8.26 8.26 0 0 0-6 2.06Q9.89 5.67 8.31 7.27c-1.21-.13-4.08-.2-6 1.74a1 1 0 0 0 0 1.41l11.3 11.32a1 1 0 0 0 1.41 0c1.95-2 1.89-4.82 1.77-6l3.21-3.2c3.19-3.19 1.74-9.18 1.68-9.43a1 1 0 0 0-.76-.73zm-2.36 8.75L15 14.67a1 1 0 0 0-.27.9a6.81 6.81 0 0 1-.54 3.94L4.52 9.82a6.67 6.67 0 0 1 4-.5A1 1 0 0 0 9.39 9s1.4-1.45 3.51-3.56A6.61 6.61 0 0 1 17.5 4a14.51 14.51 0 0 1 2.33.2c.24 1.43.62 5.04-1.27 6.93z"/><circle cx="15.73" cy="8.3" r="2" fill="currentColor"/><path fill="currentColor" d="M5 16c-2 1-2 5-2 5a7.81 7.81 0 0 0 5-2z"/></svg>
            </div>
            <div class="text">
                <h4>一键发布多端</h4>
                <p>发布抖音视频、西瓜视频以及今日头条</p>
            </div>
        </li>
            <li>
                <div class="pic">
                    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><path fill="currentColor" d="M20.92 2.38A15.72 15.72 0 0 0 17.5 2a8.26 8.26 0 0 0-6 2.06Q9.89 5.67 8.31 7.27c-1.21-.13-4.08-.2-6 1.74a1 1 0 0 0 0 1.41l11.3 11.32a1 1 0 0 0 1.41 0c1.95-2 1.89-4.82 1.77-6l3.21-3.2c3.19-3.19 1.74-9.18 1.68-9.43a1 1 0 0 0-.76-.73zm-2.36 8.75L15 14.67a1 1 0 0 0-.27.9a6.81 6.81 0 0 1-.54 3.94L4.52 9.82a6.67 6.67 0 0 1 4-.5A1 1 0 0 0 9.39 9s1.4-1.45 3.51-3.56A6.61 6.61 0 0 1 17.5 4a14.51 14.51 0 0 1 2.33.2c.24 1.43.62 5.04-1.27 6.93z"/><circle cx="15.73" cy="8.3" r="2" fill="currentColor"/><path fill="currentColor" d="M5 16c-2 1-2 5-2 5a7.81 7.81 0 0 0 5-2z"/></svg>
                </div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布抖音视频、西瓜视频以及今日头条</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><path fill="currentColor" d="M20.92 2.38A15.72 15.72 0 0 0 17.5 2a8.26 8.26 0 0 0-6 2.06Q9.89 5.67 8.31 7.27c-1.21-.13-4.08-.2-6 1.74a1 1 0 0 0 0 1.41l11.3 11.32a1 1 0 0 0 1.41 0c1.95-2 1.89-4.82 1.77-6l3.21-3.2c3.19-3.19 1.74-9.18 1.68-9.43a1 1 0 0 0-.76-.73zm-2.36 8.75L15 14.67a1 1 0 0 0-.27.9a6.81 6.81 0 0 1-.54 3.94L4.52 9.82a6.67 6.67 0 0 1 4-.5A1 1 0 0 0 9.39 9s1.4-1.45 3.51-3.56A6.61 6.61 0 0 1 17.5 4a14.51 14.51 0 0 1 2.33.2c.24 1.43.62 5.04-1.27 6.93z"/><circle cx="15.73" cy="8.3" r="2" fill="currentColor"/><path fill="currentColor" d="M5 16c-2 1-2 5-2 5a7.81 7.81 0 0 0 5-2z"/></svg>
                </div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布抖音视频、西瓜视频以及今日头条</p>
                </div>
            </li>
        </ul>
    </div>

</body>
</html>